<style>
    .new-form-control{
        display: block;
        width: 48%;
        height: 34px;
        font-size: 14px;
        border: 1px solid #ccc;
        margin-top: -14px;
        margin-bottom: 14px;
        float: left;
    }
    .new-input{
        border: 0;
        float: left;
        width: 4%;
        height: 34px;
        text-align: center;
        margin-top: -14px;
    }
    .new-units{
        height: 34px;
        width: 20%;
        font-size: 16px;
        float: left;
        margin-bottom: 10px;
    }
    .new-sum{
        display: block;
        width: 80%;
        height: 34px;
        font-size: 14px;
        border: 1px solid #ccc;
        float: left;
        margin-bottom: 10px;
    }
</style>
<!--添加弹出框-->
<div class="wizard" id="wizard-demo">
    <form method="post" onsubmit="add()" id="addForm">
        <h1>添加订单评审</h1>
        <div class="wizard-card" data-onValidated="setServerName" data-cardname="name">
            <h3><span>基本信息</span></h3>

            <div class="wizard-input-section">

                <div class="form-group">
                    <label>客户名称</label>
                    <select class="form-control" name="client_add" id="client" data-validate="">
                        {volist name="clients" id="v"}
                        <option value="{$v.cid}">{$v.state} {$v.client}</option>
                        {/volist}
                    </select>
                </div>
                <div class="form-group">
                    <label>客户联系方式</label>
                    <input type="text" class="form-control" name="client_contacts_add" id="client_contacts_add" data-validate=""/>
                </div>
                <div class="form-group">
                    <label>下单联系人</label>
                    <input type="text" class="form-control" name="order_placer_add" id="order_placer" data-validate=""/>
                </div>

                <div class="form-group">
                    <label>下单联系人电话</label>
                    <input type="text" class="form-control" name="placer_phone_add" id="placer_phone" data-validate=""/>
                </div>
                <div class="form-group">
                    <label>国内货运</label>
                    <textarea type="text" class="form-control" name="transport_add" id="transport" data-validate=""></textarea>
                </div>
            </div>

        </div>

        <div class="wizard-card" data-cardname="group" id="forMeter">
            <h3><span>表计参数</span></h3>

            <div class="wizard-input-section">
                <div class="form-group">
                    <label class="col-md-6 col-sm-6 col-lg-6 col-xs-6" style="text-align: center;">基表型号</label>
                    <lable class="col-md-6 col-sm-6 col-lg-6 col-xs-6" style="text-align: center;">表数量</lable>
                </div>
            </div>
            <div class="wizard-input-section col-sm-12 col-md-12 col-xs-12">
                <div class="form-group">
                    <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
                        <select class="form-control" name="meter_id_add[0]" id="meter_id" data-validate="" onchange="noMeter(this.options[this.options.selectedIndex].value)">
                            {volist name="meterTypes" id="v"}
                            <option value="{$v['meter_id']}">{$v.meter_type} {$v.caliber}</option>
                            {/volist}
                            <option value="0">N/A</option>
                        </select>
                    </div>
                    <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
                        <input type="text" class="form-control" name="order_qty_add[0]" id="order_qty" data-validate=""/>
                    </div>
                </div>
            </div>
            <div class="wizard-input-section" id="newMeter"></div>
            <div class="wizard-input-section col-sm-12 col-md-12 col-xs-12">
                <button type="button" id="addMeter" style="margin-left: 8px;">添加基表型号</button>
            </div>
            <div class="wizard-input-section col-sm-12 col-md-12 col-xs-12">
                <div class="form-group">
                    <label>方案</label>
                    <select class="form-control" name="pro_id_add" id="pro_id" data-validate="proIdNotNull" onchange="getPro(this.options[this.options.selectedIndex].value)">
                        <option value=""></option>
                        {volist name="programs" id="v"}
                        <option value="{$v['pro_id']}">{$v.pro_name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
        </div>

        <div class="wizard-card" data-cardname="services" id="forFit">
            <h3><span>配件信息</span></h3>
            <div class="wizard-input-section">
                <div class="form-group">
                    <label class="col-md-6 col-sm-6 col-lg-6 col-xs-6" style="text-align: center;">配件名称</label>
                    <label class="col-md-6 col-sm-6 col-lg-6 col-xs-6" style="text-align: center;">配件数量</label>
                </div>
            </div>
            <!--树-->
            <div class="wizard-input-section col-sm-12 col-md-12 col-xs-12">
                <div class="form-group">
                    <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
                        <select type="checkbox" id="fid_add" name="fid_add[0]"
                                class="form-control col-md-12 col-sm-12 col-lg-12">
                            <option value=""></option>
                            {volist name="fittings" id="v"}
                            <option value="{$v['fid']}">{$v.fitting}</option>
                            {/volist}
                        </select>
                    </div>
                    <!--<div class="col-md-2 col-sm-2 col-lg-2"></div>-->
                    <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
                        <input type="text" name="fid_num_add[0]" class="form-control col-md-12 col-sm-12 col-lg-12">
                    </div>
                </div>
            </div>
            <div class="wizard-input-section" id="fromFit"></div>
            <div class="wizard-input-section">
                <button type="button" id="addFit" style="margin-left: 16px;">添加配件</button>
            </div>
        </div>

        <div class="wizard-card" data-onload="" data-cardname="location">
            <h3><span>基表参数</span></h3>
            <div class="wizard-input-section" id="meterParams">
                <div class="form-group">
                    <label>内置止回阀</label>
                    <select class="form-control" name="is_valve_add" id="is_valve" data-validate="">
                        <option value="1">带</option>
                        <option value="0">不带</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>内置滤网</label>
                    <select class="form-control" name="is_sieve_add" id="is_sieve" data-validate="">
                        <option value="1">带</option>
                        <option value="0">不带</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>铭牌信息</label>
                    <select class="form-control" name="nameplate_add" id="nameplate" data-validate="">
                        <option value="标准型Laison">标准型Laison</option>
                        <option value="客户化">客户化</option>
                        <option value="空">空</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>是否带唛头</label>
                    <select class="form-control" name="is_mark_add" id="is_mark" data-validate="">
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="wizard-card">
            <h3><span>技术参数</span></h3>

            <div class="wizard-input-section">
                <div class="form-group" id="chain_add_d">
                    <label>固定/动态信道</label>
                    <select class="form-control" name="chain_add" id="chain_add" data-validate="">
                        <option value="固定信道">固定信道</option>
                        <option value="动态信道">动态信道</option>
                    </select>
                </div>
                <div class="form-group" id="is_infrade_add_d">
                    <label>红外开关</label>
                    <select class="form-control" name="is_infrade_add" id="is_infrade_add" data-validate="">
                        <option value="1">开启</option>
                        <option value="0">关闭</option>
                    </select>
                </div>
                <div class="form-group forhid" id="start">
                    <label>表号长度</label>
                    <select class="form-control" name="meter_len_add" id="meter_len_add">
                        <option value="11">11位表号</option>
                        <option value="13">13位表号</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>出厂阀门状态</label>
                    <select class="form-control" name="valve_status_add" data-validate="">
                        <option value="关">关</option>
                        <option value="开">开</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>计量模式</label>
                    <select class="form-control" name="measure_mode_add" id="measure_mode_add" data-validate="">
                        <option value="1">按金额计算</option>
                        <option value="0">按体积计算</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>报警量</label>
                    <input type="text" class="form-control" name="alarm_add" id="alarm_add" data-validate=""/>
                </div>
                <div class="form-group">
                    <label>透支量</label>
                    <input type="text" class="form-control" name="overdraft_add" id="overdraft_add" data-validate=""/>
                </div>
                <div class="form-group">
                    <label>时区</label>
                    <input type="text" class="form-control" name="timezone_add" id="timezone_add" data-validate=""/>
                </div>
            </div>
        </div>


        <div class="wizard-card">
            <h3><span>软件信息</span></h3>

            <div class="wizard-input-section">
                <div class="form-group">
                    <label>软件来源</label>
                    <select class="form-control" name="soft_from_add" data-validate="" onchange="setSection(this.options[this.options.selectedIndex].value)">
                        <option value="LAISON系统">LAISON系统</option>
                        <option value="第三方软件">第三方软件</option>
                    </select>
                </div>
            </div>
            <div class="wizard-input-section" id="soft_section">
                <div class="form-group">
                    <label>加密方式</label>
                    <select class="form-control" name="crypt_add" id="crypt" data-validate="" onchange="getCrypt(this.options[this.options.selectedIndex].value)">
                        <option value="软加密">软加密</option>
                        <option value="硬加密">硬加密</option>
                    </select>
                </div>
                <div class="form-group forhid" id="sgc_add_d">
                    <label>SGC号</label>
                    <input type="text" class="form-control" name="sgc_add" id="sgc_add">
                </div>
                <div class="form-group forhid" id="cry_utk_add_d">
                    <label>表计出厂密钥状态</label>
                    <select class="form-control" name="cry_utk_add" id="cry_utk_add" data-validate="">
                        <option value="DDTK">DDTK</option>
                        <option value="DUTK">DUTK</option>
                    </select>
                </div>

                <!--<div class="form-group">
                    <label>软件版本</label>
                    <select class="form-control" name="soft_version_add" id="soft_version" data-validate="">
                        <option value="B/S">B/S</option>
                        <option value="C/S">C/S</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>数据库</label>
                    <select class="form-control" name="sql_db_add" id="sql_db" data-validate="">
                        <option value="Access">Access</option>
                        <option value="SQL">SQL</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>是否需要usbkey</label>
                    <select class="form-control" name="is_usbkey_add" id="is_usbkey" data-validate="">
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div>-->
            </div>
        </div>

        <div class="wizard-card">
            <h3><span>其他信息</span></h3>
            <div class="wizard-input-section">
                <div class="form-group">
                    <label>所属业务部门</label>
                    <select class="form-control" name="sale_id_add" id="sale_id_add">
                        <option value="1">业务一部</option>
                        <option value="2">业务二部</option>
                        <option value="3">业务三部</option>
                        <option value="4">业务四部</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>订单金额-单位</label>
                    <div>
                        <input type="text" name="amounts_add" id="amounts_add" class="new-sum">
                        <select name="unit_add" id="unit_add" class="new-units">
                            <option value="$">$</option>
                            <option value="￥">￥</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>备注</label>
                    <textarea type="text" name="other_add" class="form-control" data-validate=""></textarea>
                </div>
            </div>
        </div>

    </form>
</div>
<!--添加弹出框-->
<script src="__JS__/jquery.js"></script>
<script type="text/javascript">

    var jsonfitting = '{$jsonfittings}';
    jsonfitting = JSON.parse(jsonfitting)
    //console.log(jsonfitting)
    var fidArr = []
    for(var i=0;i<jsonfitting.length;i++){
        fidArr[i] = jsonfitting[i].fid
    }
    //console.log(fidArr)
    /*添加配件*/
    var vaid = 0;
    $('#addFit').click(function () {
        vaid++;
        $(`<div id="form" class="wizard-input-section col-sm-12 col-md-12 col-xs-12">
            <div class="form-group">
                <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
                    <select type="checkbox" id="fid_add" name="fid_add[${vaid}]"
                            class="form-control col-md-12 col-sm-12 col-lg-12">
                        {volist name="fittings" id="v"}
                        <option value="{$v['fid']}">{$v.fitting}</option>
                        {/volist}
                    </select>
                </div>
                <!--<div class="col-md-2 col-sm-2 col-lg-2"></div>-->
                <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
                    <input type="text" name="fid_num_add[${vaid}]" class="form-control col-md-12 col-sm-12 col-lg-12">
                </div>
                <button type="button" class="delHi" style="margin-left: 8.1px;margin-top: 1px;">删除配件</button>
            </div>
          </div>
        `).appendTo('#fromFit');
    })
    $(function(){
        $('#forFit').delegate(".delHi","click",function(){
            //alert(123);
            $(this).closest('#form').remove();
            vaid--;
        });
    });

    //方案选择
    function getPro(pro_id) {
        //console.log(123)
        //post前设为同步
        $.ajaxSettings.async = false;
        $.post("{:url('Program/one')}",{pro_id:pro_id},function(data){
            //console.log(data)
            var connect_way = ''
            var pro_pay =''
            if(data) {
                //根据方案通讯方式判断后面的显示列
                connect_way = data[0].connect_way;
                pro_pay = data[0].pro_pay
                //console.log(connect_way+','+pro_pay)
                //0RFID_V5,1STS_RFID,2STS_IR,3STS_LORA,4STS_NBIot,5STS_GPRS
                if(connect_way == 1){
                    $('#chain_add_d').addClass('forhid')
                }else if(connect_way == 0){
                    $('#chain_add_d').addClass('forhid')
                    $('#is_infrade_add_d').addClass('forhid')
                }else{
                    $('#chain_add_d').removeClass('forhid')
                    $('#is_infrade_add_d').removeClass('forhid')
                }
                if(pro_pay == 0){
                    //如果方案是STS(红外和lora)预付费或者STS射频卡预付费，那么技术参数那一栏目，需要增加表号（11位还是13位）；
                    if((connect_way == 1) || (connect_way == 2) || (connect_way == 3)){
                        $('#start').removeClass('forhid')
                    }else{
                        $('#start').addClass('forhid')
                    }
                }else{
                    $('#start').addClass('forhid')
                }

            }
        },'json');
    }
    /*加密方式如果选择的是硬加密，显示SGC号和表计出场密钥状态（DDTK，DUTK）；*/
    function getCrypt(crypt) {
        if(crypt == '硬加密'){
            $('#cry_utk_add_d').removeClass('forhid')
            $('#sgc_add_d').removeClass('forhid')
        }else{
            $('#cry_utk_add_d').addClass('forhid')
            $('#sgc_add_d').addClass('forhid')
        }
    }

    //软件来源，如果是第三方软件，则不需要填写以下信息
    function setSection(val){
        if(val == '第三方软件'){
            $('#soft_section').addClass('forhid')
        }else{
            $('#soft_section').removeClass('forhid')
        }
    }

    /*添加基表型号*/
    var meterV = 0;
    $('#addMeter').click(function () {
        meterV++;
        $(`
        <div class="wizard-input-section col-sm-12 col-md-12 col-xs-12" id="fromMeter">
                <div class="form-group">
                    <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
                        <select class="form-control" name="meter_id_add[${meterV}]" id="meter_id" data-validate="">
                            <option value="0">N/A</option>
                            {volist name="meterTypes" id="v"}
                            <option value="{$v['meter_id']}">{$v.meter_type} {$v.caliber}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
                        <input type="text" class="form-control" name="order_qty_add[${meterV}]" id="order_qty" data-validate=""/>
                    </div>
                </div>
                <button type="button" class="delMeter" style="margin-left: 8.1px;margin-top: 1px;">删除基表型号</button>
            </div>
        `).appendTo('#newMeter')

    })
    $(function () {
        $('#forMeter').delegate(".delMeter",'click',function () {
            $(this).closest('#fromMeter').remove();
            meterV--;
        })
    })
    function noMeter(index) {
        if(index == 0){
            $('#meterParams').addClass('forhid')
        }else{
            $('#meterParams').removeClass('forhid')
        }
    }
    
    function proIdNotNull(el) {
        var val = el.val();
        ret = {
            status: true
        };
        if (val == '') {
            ret.status = false;
            ret.msg = "方案不能为空";
        }
        return ret;
    }
</script>
